<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { goPage } from "../../utils";
import { reactive } from "vue";
import { onMounted } from "vue";
import type { Good, GoodFilter } from "../../types/good";
import { getGoodsList } from "../../service/goods";
import { BASE_URL } from "../../service/index";
import { shallowRef } from "vue";
import { formatPrice } from "../../utils";
import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
import { storeToRefs } from "pinia";
import { useViewStore } from "../../store";
const goSearch = () => {
  goPage("/pages/search/index");
};
const { buttonRectInfo } = storeToRefs(useViewStore());
const value = ref<string[]>(["item1"]);
//搜索参数
const searchPam = reactive(<GoodFilter>{
  type: "",
  page: 1,
  pageSize: 10,
});

// const showFilter = ref(false);
// const openFilter = () => {
//   showFilter.value = true;
//   console.log("打开筛选");
// };
// const handleFilterClose = () => {
//   console.log("关闭筛选");
// };
// const filterExpandValue = ref<string[]>(["price"]);
const total = ref(0);
const products = shallowRef<Good[]>([]);
const categories = [
  { name: "热门推荐" },
  { name: "沙发" },
  { name: "椅子" },
  { name: "茶几" },
  { name: "床" },
  { name: "餐桌" },
  { name: "床头柜" },
  { name: "电视柜" },
];
const currentCategory = ref(0);
const selectCategory = (i: number) => {
  currentCategory.value = i;
  searchPam.type = categories[i].name;
  if (searchPam.type === "热门推荐") {
    searchPam.type = "";
  }
  searchPam.page = 1;
  products.value = [];
  reqList();
};
const loadmoreState = ref<LoadMoreState>("loading");
const reqList = () => {
  getGoodsList(searchPam)
    .then((res) => {
      products.value = products.value?.concat(res.list);
      total.value = res.total;
      // 更新加载状态
      if (products.value.length >= total.value && total.value > 0) {
        loadmoreState.value = "finished";
      } else if (total.value === 0) {
        loadmoreState.value = "finished";
      } else {
        loadmoreState.value = "loading";
      }
    })
    .catch((err) => {
      console.error(err);
      loadmoreState.value = "error";
    });
};

onMounted(() => {
  reqList();
});
const loadMore = () => {
  console.log("触底了");
  console.log(loadmoreState.value);
  // 只有在非加载状态且有更多数据时才触发加载
  if (products.value.length < total.value) {
    searchPam.page++;
    reqList();
  }
};

// 首图轮播数据
const bannerList = ref([
  {
    id: 1,
    title: "现代简约沙发",
    image:
      "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80",
    subtitle: "舒适生活从这里开始",
  },
  {
    id: 2,
    title: "北欧风格餐桌",
    image:
      "https://images.unsplash.com/photo-1617806118233-18e1de247200?w=800&q=80",
    subtitle: "享受美好用餐时光",
  },
  {
    id: 3,
    title: "精致茶几",
    image:
      "https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=800&q=80",
    subtitle: "点缀您的居家空间",
  },
  {
    id: 4,
    title: "舒适床品",
    image:
      "https://images.unsplash.com/photo-1505693314120-0d443867891c?w=800&q=80",
    subtitle: "品质睡眠体验",
  },
]);
</script>

<template>
  <view class="home page-wrapper">
    <view class="home-title">货架</view>
    <view class="search-bar" @click.stop="goSearch">
      <wd-icon name="search" size="40rpx" color="#808080"></wd-icon>
      <wd-text text="搜索您的心仪产品" size="26rpx"></wd-text>
      <!-- <view class="options-btn" @click.prevent="openFilter">
        <wd-icon name="filter" size="50rpx" color="#fff"></wd-icon>
      </view> -->
    </view>
    <scroll-view
      scroll-y
      class="scroll-wrapper"
      @scrolltolower="loadMore"
      :show-scrollbar="false"
    >
      <scroll-view
        class="banner-scroll"
        scroll-x
        :show-scrollbar="false"
        scroll-with-animation
      >
        <view class="banner-container">
          <view
            class="banner-item"
            v-for="(banner, index) in bannerList"
            :key="banner.id"
          >
            <view class="banner-image-wrapper">
              <image
                class="banner-image"
                :src="banner.image"
                mode="aspectFill"
              />
            </view>
            <view class="banner-title">{{ banner.title }}</view>
            <view class="banner-subtitle">{{ banner.subtitle }}</view>
          </view>
        </view>
      </scroll-view>

      <wd-sticky :offset-top="buttonRectInfo.top + 108">
        <view class="types-bar">
          <view
            class="types-bar-item"
            v-for="(category, index) in categories"
            :key="index"
            :class="{ selected: index === currentCategory }"
            @click="selectCategory(index)"
          >
            <view class="type-icon-wrapper">
              <wd-img
                :width="'50rpx'"
                :height="'50rpx'"
                :src="`/static/${category.name}.png`"
              />
            </view>
            <wd-text :text="category.name" size="28rpx"></wd-text>
          </view>
        </view>
      </wd-sticky>
      <!-- 货架 -->
      <view class="shelf">
        <view class="shelf-inner"
          ><view
            class="product"
            v-for="(product, index) in products"
            :key="index"
            @click="goPage('/pages/detail/index?id=' + product.id)"
          >
            <view
              class="product-img"
              :style="{
                backgroundImage: `url(${
                  BASE_URL + '/api/file/' + product.img
                })`,
              }"
            ></view>
            <view class="product-info">
              <view class="product-name">
                {{ product.name }}
              </view>
              <view class="price-container">
                <text class="price-symbol">¥</text>
                <text class="price-integer">{{
                  formatPrice(product.price).integer
                }}</text>
                <text class="price-decimal"
                  >.{{ formatPrice(product.price).decimal }}</text
                >
              </view>
              <view class="product-arrow">
                <wd-icon
                  name="arrow-right1"
                  size="32rpx"
                  color="#808080"
                ></wd-icon>
              </view>
            </view> </view
        ></view>
        <view class="loadmore-wrapper" v-if="total > 0">
          <wd-loadmore custom-class="loadmore" :state="loadmoreState" />
        </view>
        <wd-status-tip image="search" tip="当前搜索无结果" v-if="total === 0" />
      </view>
    </scroll-view>
    <!-- <wd-popup
      v-model="showFilter"
      position="right"
      :custom-style="`height: 100%;width: 80vw;margin-top:${buttonRectInfo.bottom}px;border-radius:var(--border-radius)`"
      @close="handleFilterClose"
    >
      <wd-collapse v-model="value" custom-style="padding:0">
        <wd-collapse-item title="价格" name="item1">
          <wd-radio-group
            v-model="searchPam.price"
            shape="button"
            custom-style="display:flex;gap:12rpx;flex-wrap:wrap"
          >
            <wd-radio :value="1">不限</wd-radio>
            <wd-radio :value="2">¥100-299</wd-radio>
            <wd-radio :value="3">¥300-499</wd-radio>
            <wd-radio :value="4">¥500-999</wd-radio>
            <wd-radio :value="5">¥1000-1999</wd-radio>
            <wd-radio :value="6">¥2000+</wd-radio>
          </wd-radio-group></wd-collapse-item
        >
      </wd-collapse>
    </wd-popup> -->
  </view>
</template>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  height: calc(100vh - (var(--status-bar-height) + 100rpx));
  // overflow: hidden;
  background-color: #fff;

  /* 占满整个视口高度 */
  .home-title {
    width: 100%;
    color: var(--wot-color-theme);
    height: 24px;
    font-size: 40rpx;
    font-weight: 600;
    letter-spacing: 0px;
    padding-bottom: 5px;
    border-bottom: 1px solid #efefef;
  }

  .search-bar {
    width: 100%;
    height: 50px;
    border-radius: var(--border-radius);
    background: rgba(248, 248, 248, 1);
    display: flex;
    align-items: center;
    padding: 16px 0;
    display: flex;
    align-items: center;
    column-gap: 30rpx;
    padding-left: 26rpx;
    position: relative;
    box-sizing: border-box;

    .options-btn {
      height: 100%;
      width: 55px;
      background-color: var(--wot-color-theme);
      position: absolute;
      right: 0;
      border-radius: var(--border-radius);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .scroll-wrapper {
    height: calc(100vh - (var(--status-bar-height) + 200rpx));
    width: 100vw;
    padding: 0 22rpx;
    box-sizing: border-box;
    // 首图轮播样式
    .banner-scroll {
      height: 620rpx;
      width: 100%;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }

      .banner-container {
        display: inline-flex;
        gap: 24rpx;
        height: 100%;
        align-items: flex-start;
      }

      .banner-item {
        display: inline-flex;
        flex-direction: column;
        width: 486rpx;
        flex-shrink: 0;
        height: 100%;

        .banner-image-wrapper {
          width: 100%;
          height: 486rpx;
          border-radius: 24rpx;
          overflow: hidden;
          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
          box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
          transition: all 0.3s ease;
          flex-shrink: 0;

          .banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .banner-title {
          margin-top: 20rpx;
          font-size: 30rpx;
          font-weight: 600;
          color: #1a1a1a;
          letter-spacing: 0.5rpx;
          line-height: 1.3;
        }

        .banner-subtitle {
          margin-top: 8rpx;
          font-size: 24rpx;
          color: #999;
          font-weight: 400;
          line-height: 1.4;
        }
      }
    }
    .types-bar {
      display: flex;
      gap: 10rpx;
      overflow-x: auto;
      width: 94vw;
      height: 160rpx;
      flex: none;
      padding: 16rpx 0;
      padding-bottom: 32rpx;
      background-color: #fff;
      //不显示滚动条
      &::-webkit-scrollbar {
        display: none;
      }

      .types-bar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 140rpx;
        gap: 10rpx;
        flex: none;

        .type-icon-wrapper {
          width: 120rpx;
          height: 120rpx;
          border-radius: var(--border-radius);
          background-color: var(--secondary-bg);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        &.selected {
          .type-icon-wrapper {
            border: 2px solid var(--wot-color-theme);
          }
        }
      }
    }

    //货架 一行两个
    .shelf {
      display: flex;
      gap: 20rpx;
      width: 100%;
      min-height: 200rpx;
      padding-bottom: 300rpx;
      flex-direction: column;
      .shelf-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20rpx;
        width: 100%;
      }

      .product {
        width: 48%;
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        // box-shadow: var(--f-box-shadow);
        border: 1px solid #f4f4f4;
        border-radius: var(--border-radius);
        height: 460rpx;
        overflow: hidden;

        .product-img {
          width: 100%;
          height: 360rpx;
          background: no-repeat center;
          background-size: cover;
        }

        .product-info {
          display: flex;
          flex-direction: column;
          padding-left: 32rpx;
          padding-bottom: 26rpx;
          position: relative;
          gap: 12rpx;

          .product-name {
            font-size: 28rpx;
            font-weight: 600;
            color: #242424;
            width: 99%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .tag-name {
            font-size: 32rpx;
          }

          .product-arrow {
            width: 50rpx;
            height: 50rpx;
            border-radius: 16rpx;
            border: 1px solid #d2d0d0;
            position: absolute;
            right: 24rpx;
            bottom: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .loadmore-wrapper {
        width: 100%;
        padding: 40rpx 0;
        display: flex;
        justify-content: center;
      }

      :deep(.loadmore) {
        background-color: #f4f4f4;
        margin: 20px 0;
      }
    }
  }
}
</style>
